<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Sidebar Menu</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg:#333">
        <a href="#">
          <div class="icon">
            <ion-icon name="logo-apple"></ion-icon>
          </div>
          <div class="text">Website Logo</div>
        </a>
      </li>
      <div class="Menulist">
        <li style="--bg:#f44336" class="active">
          <a hred="#">
            <div class="icon">
              <ion-icon name="home-outline"></ion-icon>
            </div>
            <div class="text">Home</div>
          </a>
        </li>
        <li style="--bg:#ffa117">
          <a hred="#">
            <div class="icon">
              <ion-icon name="person-outline"></ion-icon>
            </div>
            <div class="text">Profile</div>
          </a>
        </li>
        <li style="--bg:#0fc70f">
          <a hred="#">
            <div class="icon">
              <ion-icon name="chatbubble-outline"></ion-icon>
            </div>
            <div class="text">Inbox</div>
          </a>
        </li>
        <li style="--bg:#2196f3">
          <a hred="#">
            <div class="icon">
              <ion-icon name="bar-chart-outline"></ion-icon>
            </div>
            <div class="text">Analytics</div>
          </a>
        </li>
        <li style="--bg:#b145e9">
          <a hred="#">
            <div class="icon">
              <ion-icon name="cart-outline"></ion-icon>
            </div>
            <div class="text">Order</div>
          </a>
        </li>
        <li style="--bg:#e91e63">
          <a hred="#">
            <div class="icon">
              <ion-icon name="settings-outline"></ion-icon>
            </div>
            <div class="text">Settings</div>
          </a>
        </li>
      </div>
      <div class="bottom">
        <li style="--bg:#333">
          <a href="#">
            <div class="icon">
              <div class="imgBx">
                <img src="./user.jpg" />
              </div>
            </div>
            <div class="text">Muhammea Irshad</div>
          </a>
        </li>
        <li style="--bg:#333">
          <a href="#">
            <div class="icon">
              <ion-icon name="log-out-outline"></ion-icon>
            </div>
            <div class="text">LogOut</div>
          </a>
        </li>
      </div>
    </ul>
  </div>
</body>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
  let menuToggle = document.querySelector('.menuToggle')
  let sidebar = document.querySelector('.sidebar')

  menuToggle.onclick = function() {
    menuToggle.classList.toggle('active')
    sidebar.classList.toggle('active')
  }

  let Menulist = document.querySelectorAll('.Menulist li')
  function activeLink() {
    Menulist.forEach(item => {
      item.classList.remove('active')
    })
    this.classList.add('active')
  }
  Menulist.forEach(item => {
    item.addEventListener('click', activeLink)
  })
</script>

</html>